<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
       .active {
           color: aqua;
       }


    </style>
</head>

<body>
    <div id="app">
        <div>
            <button v-for="(item, index) in selectedArr" :key="index" @click="delfn(index)">{{item}}X</button>
        </div>
        <div>
            <button @click="modalshowfn">添加标签</button>
        </div>
        <div class="wrap" v-show="isshow">
            <span style="border:1px solid red; width: 80px; background-color: #ccc; margin-left: 10px;" v-for="(item, index) in willArr" :key="index" @click="changeindex(index)" :class="index===activeIndex?'active':''"><span></span>{{item.tit}}</span>
            <hr>
            <div v-for="(item, index) in willArr[activeIndex].children" :key="item" @click="addfn(item)">{{item}}</div>
          
        </div>
    </div>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        console.log(Mock);
        var app = new Vue({
            el: '#app',
            data: {
                selectedArr:[
                    "javascript"
                ],
                activeIndex:0, // 用于控制高亮和选中的下标
                willArr:[
                    {
                        tit:   "前端",
                        children: [
                           "html","css","js" 
                        ]
                    },
                    {
                        tit:"后端",
                        children:[
                            "java","php","nodejs"
                        ]
                    },
                    {
                        tit:"数据库",
                        children:[   
                            "sqlserver", "mysql"
                        ]
                    }
                 
                ],
                isshow:false
            },
            methods: {
                modalshowfn() {
                    this.isshow = true
                },
                changeindex(index) {
                    this.activeIndex = index
                },
                addfn (item) {
                    console.log(item);
                    if (this.selectedArr.length > 5) {
                          return  alert("您不能在添加了")
                    }
                     this.selectedArr.push(item)
                    
                   //  [...new Set(arr)]
                    this.selectedArr =  [...new Set(this.selectedArr)]
                },
                delfn (index) {
                    this.selectedArr.splice(index,1)
                }
            },
        })
    </script>
</body>

</html>